<template>
  <div class="goods-list">
    <ul class="goods-list__list">
      <li class="item" v-for="(item, i) in list" :key="i">
        <item-card
          :itemId="item.id"
          :title="item.name"
          :price="item.price"
          :thumb="item.mainImgUrl"
        />
      </li>
    </ul>
    <div class="goods-list__page">
      <el-pagination
        :current-page="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        @current-change="pageChangeHandler"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api';
import ItemCard from './ItemCard.vue';

export default defineComponent({
  components: { ItemCard },
  props: { list: Array, total: Number, size: Number, page: Number },
  setup(props, { emit }) {
    const pageChangeHandler = (p) => {
      emit('update:page', p);
    };

    return { pageChangeHandler };
  },
});
</script>

<style lang="less" scoped>
.goods-list {
  &__list {
    column-count: 5;

    .item {
      margin-bottom: 1rem;

      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
      page-break-inside: avoid; /* Firefox */
      break-inside: avoid; /* IE 10+, Chrome, Safari, Opera */
    }
  }
  &__page {
    margin-top: 1rem;
    width: 100%;
    text-align: right;
  }
}
</style>
